<script setup lang="ts">
import layout from "../../components/layout.vue"
// 引入左上组件
import LeftTop from "./components/LeftTop.vue"
// 引入左下组件
import LeftBottom from "./components/LeftBottom.vue"
// 引入中上地图
import CenterTop from "./components/CenterTop.vue"
// 引入中下轮播图
import CenterBottom from "./components/CenterBottom.vue"
// 引入右上组件
import RightTop from "./components/RightTop.vue"
// 引入右下组件
import RightBottom from "./components/RightBottom.vue"
</script>

<template>
    <div class="topright"></div>
    <!-- 就业趋势 -->
    <layout>
        <template #left>
            <!-- 左上 -->
            <left-top></left-top>
            <!-- 左下 -->
            <left-bottom></left-bottom>
        </template>
        <!-- 中间部分 -->

        <template #centent>
            <!-- 中上地图 -->
            <center-top></center-top>
            <!-- 中下轮播表 -->
            <center-bottom></center-bottom>
        </template>
        <!-- 右边部分 -->

        <template #right>
            <!-- 右上内容 -->
            <right-top></right-top>
            <!-- 右下内容 -->
            <right-bottom></right-bottom>
        </template>
    </layout>
</template>

<style scoped lang="scss">
.topright {
    width: 100%;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../../assets/layout/Top.png) no-repeat 0 0 / 100% 100%;
    z-index: 999;
}
</style>